<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li ul {
            display:none;
        }
        li .show {
            display: block;
        }
    </style>
</head>
<body>
<div id="list">
    <!-- <ul>
        <li>
            <p>第一级菜单</p>
            <ul>
                <li>
                    <p>第二级菜单</p>
                    <ul>
                        <li>
                            <p>第三级菜单</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>     -->
</div>
<script>

var data = [
	{
		id:0,
		pid:-1,
		title:"微云"
	},
	{
		id:1,
		pid:0,
		title:"我的文档"
	},
	{
		id:2,
		pid:0,
		title:"我的音乐"
	},
	{
		id:2999,
		pid:1,
		title:"js程序设计"
	},
	{
		id:29000,
		pid:1,
		title:"js权威指南"
	},
	{
		id:23333,
		pid:2,
		title:"王杰"
	},
	{
		id:244444,
		pid:2,
		title:"张国荣"
	},
	{
		id:3,
		pid:2,
		title:"周杰伦"
	},
	{
		id:4000,
		pid:3,
		title:"稻香"
	},
	{
		id:4,
		pid:3,
		title:"发如雪"
	},
	{
		id:600,
		pid:3,
		title:"夜曲"
	}
]

{
   
    let list = document.querySelector('#list');
    let topPid = -1;
    list.innerHTML = renderMenu( topPid );

    // 利用事件监听
    list.addEventListener('click',(e)=>{
        let nextEle = e.target.nextElementSibling; //假如点击的元素有下个兄弟节点就展开
        if( nextEle ) {
            nextEle.classList.toggle('show');
        }else{
            alert('没有子菜单啦')
        }
    }); 
    function renderMenu( id ) {
        let childs = getAllChild( id );
        let inner = '<ul>';
        childs.forEach((item,i) =>{
            inner += `
                        <li>
                            <p>${item.title}</p>
                             ${getAllChild( item.id ).length>0 ? renderMenu( item.id ) : '' }
                        </li> 
            `;
        });
        inner += '</ul>';
        return inner;
    }

}    

//根据id == pid 找子级

function getAllChild( id ) {
    return data.filter(item=>item.pid == id );
}

//根据pid == id找父级

  function getParent( pid ) {
      return data.filter( item => item.id == pid );
  }
</script>

</body>
</html>